<template>
  <div>
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
    <el-form
      ref="refForm"
      style="margin-top:20px"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="测量人类型:" prop="surveyorType">
            <el-select
              v-model="formData.surveyorType"
              placeholder="请选择"
              disabled
              style="width: 100%"
            >
              <el-option
                v-for="item in surveyorTypeOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="测量人:" prop="surveyorName">
            <input-with-dialog
              v-model="formData.surveyor"
              :props="{label:'userName',value:'account'}"
              :config="dialogConfigName"
              @change="handleChangeName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="测量人电话:" prop="surveyorPhone">
            <el-input v-model="formData.surveyorPhone" maxlength="11" show-word-limit />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="预计测量时间:" prop="expectSurveyTime">
            <el-date-picker
              v-model="formData.expectSurveyTime"
              type="date"
              size="mini"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd 23:59:59"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注:" prop="surveyRemark   ">
            <el-input v-model="formData.surveyRemark " maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="qup-title-box"><span class="border" /><span>卖场测绘详情</span></div>
    <map-detail :detail-data="id" />
    <div class="qup-title-box"><span class="border" /><span>附件管理</span></div>
    <file-detail :file-data="formData.shopAttachmentDTOList" />
  </div>
</template>
<script>
import { filterURL } from '@/utils'
import { getShopAttachment } from '@/api/common.js'
import mapDetail from './mapDetail.vue'
import fileDetail from './fileDetail.vue'
import BackPageMixin from '@/mixins/backPage'
import { getDictByPatchType } from '@/api/dataDict'
import { getDetailData, saveState } from '@/api/shopMap'
export default {
  name: 'MapArrange',
  components: { mapDetail, fileDetail },
  mixins: [BackPageMixin],
  props: {},
  data() {
    return {
      id: '',
      pickerOptions: {
        disabledDate(time) {
          var date = new Date()
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          var d = date.getDate()
          var nowTime = new Date(`${y}-${m}-${d} 00:00:00`)
          return time.getTime() < nowTime.getTime()
        }
      },
      saveLoading: false,
      surveyorTypeOptions: [], // 测量人类型
      formRules: {
        surveyorType: [
          { required: false, message: '请选择测量人类型', trigger: 'change' }
        ],
        surveyorName: [
          { required: true, message: '请输入测量人姓名', trigger: 'change' }
        ],
        expectSurveyTime: [
          { required: true, message: '请选择测量时间', trigger: 'change' }
        ],
        surveyorPhone: [
          { required: false, message: '请输入测量人电话', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ]
      },
      formData: {
        id: '',
        state: '',
        constCode: '',
        surveyorType: '', // 测量人类型
        surveyorName: '', // 测量人
        surveyorCode: '',
        expectSurveyTime: '', // 测量时间
        surveyRemark: '', // 备注
        surveyorPhone: '', // 测量人电话
        shopAttachmentDTOList: []
      },
      dialogConfigName: {
        title: '测量人',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/domainUser/page`,
        setting: [{ prop: 'account', title: '账号' }, { prop: 'userName', title: '姓名' }, { prop: 'orgName', title: '组织' }, { prop: 'phone', title: '电话' }]
      }
    }
  },
  async created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getFiles()
      this.formData.id = this.id
      await getDetailData(this.id).then(res => {
        if (res.success === 1) {
          // const { state, constCode, surveyorType } = res.data
          // this.formData = { state, constCode, surveyorType }
          this.formData.state = res.data.state
          this.formData.constCode = res.data.constCode
          this.formData.surveyorType = res.data.surveyorType
          this.formData.surveyRemark = res.data.surveyRemark || ''
        }
      })
    }
    const surveyorData = [{ code: this.formData.surveyorCode, name: this.formData.surveyorPhone }]
    this.$set(this.formData, 'surveyor', surveyorData)
    this.getDictByPatchTypeAll()
  },
  methods: {
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.formData.shopAttachmentDTOList = res.data
      })
    },
    handleChangeName(data) {
      if (data.length !== 0) {
        this.formData.surveyorCode = data[0].account// 测量人编码
        this.formData.surveyorName = data[0].userName// 测量人名称
        this.formData.surveyorPhone = data[0].phone// 测量人电话
        this.$refs.refForm.validateField('surveyorName')
      } else {
        this.formData.surveyorCode = ''
        this.formData.surveyorName = ''// 测量人名称
        this.formData.surveyorPhone = ''// 测量人电话
      }
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(file) {
      const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (fileExtension === 'pdf') {
        // pdf预览
        const url = `/pdf-file/` + file.attachmentUrl
        const routeData = this.$router.resolve({
          path: '/viewFile',
          query: {
            src: btoa(url)
          }
        })
        window.open(routeData.href, '_blank')
      } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png') {
      // 图片预览
        this.imgDialogVisible = true
        this.previewImg = filterURL(file.attachmentUrl)
      } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'excel') {
        // word,excel预览
        window.open('http://oos.quanyou.com.cn/op/view.aspx?src=' + filterURL(file.attachmentUrl))
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    async getDictByPatchTypeAll() {
      const { SURVEYOR_TYPE } = await getDictByPatchType(['SURVEYOR_TYPE'])
      this.surveyorTypeOptions = SURVEYOR_TYPE
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          // delete this.formData.surveyor
          saveState(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')// 返回列表页
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
